<template>
	<view class="shop-list-wrap page-bg">

		<view class="page-head">
			<view class="limit-num">还差 <text>{{info.askNum-info.involvedNum}}</text>人成团</view>
			<view class="limit-desc desc">分享到朋友圈或者群里，可提高成团概率</view>
			<view class="limit-time">距离结束还有 <text>{{freeTime.h}}</text>时 <text>{{freeTime.m}}</text>分 <text>{{freeTime.s}}</text>秒</view>
			<view class="member-list">
				<image v-for="(item, index) in teamMember" :key='index+"key"' class="member-img"
					   :src="item.avatar | avatar"></image>
			</view>
		</view>
		<view class="oage-line">
			<view class="line-info tt" v-if="info.orderItem">
				<view class="line-info__title desc">商品</view>
				<view class="line-info__con " >{{info.orderItem.comTitle}}</view>
			</view>
			<view class="line-info link">
				<view class="line-info__title desc">玩法</view>
				<view class="line-info__con">商品名称商品名称商品名称商品名称商品名称</view>
			</view>
		</view>
		<view class="circular-submit" @click="changShow(true)">立即邀请好友拼单</view>


		
	<view class="pop-wrap" @touchmove.stop.prevent="moveHandle" :animation='animationData'>
			<view class="pop-content">
				<image class="pop-close" src="../../static/common/close.png" @click="changShow(false)"></image>
				<view class="pop-title">
					<view class="pop-title__t">拼团抽奖玩法</view>
				</view>
				<scroll-view class="pop-body nav-wrap" :scroll-y="true">
					<view class="nav-wrap">
						<view class="nav-item" v-for="item in menuData" :key='item.id' @click="link(item.url)">
							<image :src="item.imgPath" class="nav-img" mode=""></image>
							<view class="nav-title">{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<popShare :isShare='isShare' @closeShare='changShow'></popShare>
	</view>
	
</template>

<script>
	import item_14 from '../../static/item_14.png'
	import item_15 from '../../static/item_15.png'
	import item_16 from '../../static/item_16.png'
	import nonePe from '../../static/item_13.png'
	import popShare from '../../components/popShare.vue'
	// #ifdef H5
	let jweixin = require('jweixin-module') 
	// #endif
	import { api as apiAss } from '../../utils/api.js'
	import common from '../../utils/common.js'
		import {
			api
		} from '../../utils/api.js'
	export default {
		data() {
			return {
				animationData: {},
				item_14,
				item_15,
				item_16,
				menuData: [ ],
				isShare: false, // 控制分享弹窗
				isAppShare:  false,
				info: {},
				nonePe,
				teamMember: [],
				freeTime: {d:'00', h:'00', m:'00',s:'00'} , // 拼团剩余时间
			};
		},
		onLoad(options) {
			this.menuData = [
				{id: 1, title: '微信好友', url: '/pages/shop/shopCate', imgPath: this.item_14},
				{id: 2, title: '朋友圈', url: '/pages/mine/order', imgPath: this.item_15},
				{id: 3, title: '复制链接', url: '/pages/mine/address', imgPath: this.item_16}
			]
			this.id = options.id
			this.getInfo()
		},
		
		methods: {
			changShow(status) {
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction:'ease-out'
				})
				if(status) {
					this.animationData = animation.opacity(1).top(0).step().export()
				}else{
					this.animationData = animation.opacity(0).top('100%').step().export()
				}
			},
			
			getInfo() {
				api.assembleOrderDetails({
					id: this.id
				}, (res) => {
					console.log(res);
					if (res) {
						let teamMember = res.assembleUserList || []
						for(let i = 1; i < res.askNum - res.involvedNum; i++) {
							teamMember.push({
								avatar: nonePe,
								nickName: '未知',
								isRegimental: false,	
								isWin: false
							})
						}
						console.log(teamMember);
						
						this.teamMember = teamMember
						this.info = res || {}
						let status = res.assembleStatus
						this.getFreeTime(res) 
					}
				})
			},
			
			// 获取倒计时
			getFreeTime(info) {
				let that = this
				let date1 = new Date()
				let date2 = new Date(info.endTime)
				let lastTime = (date2 - date1 ) / 1000
				let d,h,m,s,timeText
				let timer = setInterval(function(){
					lastTime--
					d = parseInt(lastTime / (24*3600))
					h = parseInt(lastTime / 60 / 60 % 24)
					m = parseInt(lastTime / 60 % 60)
					s = parseInt(lastTime % 60)
					s = s < 10 ? '0' + s : s 
					timeText = d * 24 + h +':' + m + ':' + s
					that.freeTime = { h: d * 24 + h, m, s }
					
					if(info.isFinish) {
						clearTimeout(timer)
					}
				},1000)
			},
			
			link() {}
		},
		
		components:{
			popShare
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	

	.page-bg {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.page-head {
		background-color: @f;
		.br;
		.content-30;
		text-align: center;
	}

	.limit-num {
		font-size: 46rpx;

		text {
			color: @theme-color;
		}
	}

	.desc {
		.f26;
		padding: 20rpx 0;
	}

	.limit-time {
		.f26;

		text {
			color: @theme-color;
		}
	}

	.member-list {
		.flex-base;
		justify-content: center;
		padding: 50rpx 0 40rpx 0;
		position: relative;
	}

	.member-img {
		width: 95rpx;
		height: 95rpx;
		border-radius: 100%;
		margin-right: 20rpx;
		position: relative;

	}

	.member-img:nth-of-type(1) {
		&::after {
			position: absolute;
			content: '团长';
			.f22;
			padding: 0 10rpx;
			text-align: center;
			height: 30rpx;
			line-height: 30rpx;
			background-color: @font-orange-color;
			color: @f;
			border-radius: 30rpx;
		}
	}

	.memebr-op {
		height: 30rpx;
		line-height: 30rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		.f22;
		padding: 0 10rpx;
	}

	.oage-line {
		.br;
		background: @f;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.line-info {
		.flex-base;
		.f28;
		.bb;
		height: 80rpx;
		line-height: 80rpx;
	}

	.line-info__title {
		.f28;
		width: 90rpx;
		flex-shrink: 0;
	}

	.line-info__con {
		flex-grow: 2;
		.text-overflow;
		padding:  20rpx;
		box-sizing: border-box;
		
	}
	
	.tt{
		line-height: 35rpx;
		height: auto;
		.line-info__con{
			white-space: pre-wrap;
			overflow: visible;
		}
	}

	.circular-submit {
		background-color: @font-orange-color;
		font-size: 34rpx;
		margin-top: 50rpx;
	}

	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:100%;
		.flex-base;
		align-items: flex-end;
	}

	.pop-content {
		background-color: @f;
		border-radius: 10upx 10upx 0 0;
		width: 100%;
		max-height: 80%;
		position: relative;
		bottom: 0;
		padding: 20upx;
		box-sizing: border-box;
	
		padding-top: 30rpx;
	}

	.pop-title {
		.flex-base;
		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}

	}

	.pop-close {
		width: 30upx;
		height: 30upx;
		border-radius: 100%;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

.nav-wrap{
	width: 100%;
		padding: 20upx 0;
		background: @bg-base-color;
		border-radius: 10upx;
		.flex-base;
	}
	.nav-item{
		width: 20%;
		text-align: center;
		.flex-base;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.nav-img{
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		margin-bottom: 20upx;
	}
	.nav-title{
		font-size: @font-size-24;
		color: @font-base-color;
	}
	
	
</style>
